window.addEventListener("DOMContentLoaded", function() {

	let headerArea = document.getElementById("games-search-div");
	//用来设置某个元素的定位为相对于浏览器窗口的固定定位
	function fixedPosition(obj, left1, top1, limit = 0) {
		if(obj && limit > obj.offsetTop) {
			obj.style.position = "fixed";
			obj.style.left = left1 + "px";
			obj.style.top = top1 + "px";
			obj.style.background = "linear-gradient(to bottom, #249eff, #52e0ff)";
			return;
		}
		obj.style.position = "";
		obj.style.left = "";
		obj.style.top = "";
		obj.style.background = "";

	}
	let scrolltop = 0;
	window.addEventListener("scroll", function() {
		scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
		fixedPosition(headerArea, 0, 0, scrolltop);

	});
	/*document.addEventListener("mouseover", function(e) {
		if(e && e.target.tagName === "A" && e.target.href) {
			e.target.title = e.target.innerHTML;
			
		}
		
	});*/
	//mouseoverShowTitle(document.getElementsByClassName("games-recommendation")[0]);
	function mouseoverShowTitle(obj) {
		try {
			obj.addEventListener("mouseover", function(e) {
				if(e && e.target.tagName === "A" && e.target.href) {
					e.target.title = e.target.innerHTML;

				}

			});

		} catch(err) {
			alert(err.message);
			console.dir(err.message);
		}

	}

	function objShowOrHide(obj1, obj2) {
		if(window.innerWidth < 540) {
			obj1.stop().hide();
			obj2.css({
				"width": "100%"
			}); //jQuery的语法，设置某个元素的宽度为整个窗口宽度
			return;
		}
		obj1.stop().show();
		obj2.css({
			"width": ""
		});
	}

	jQuery.noConflict();
	jQuery(function($) {

		//这个locationDiv函数就是用来设置需固定定位的元素的样式
		// 这里是当每次加载文档后就判断滚动距离,进而决定是否需要设置目标元素的定位为fixed
		// 这个函数还需要要在window调整大小resize和滚动时scroll判断，调用
		locationDiv($("#games-bottom-fixed").get(0), window.clientHeight, $("#games-bottom-fixed").height());
		locationDiv($("#fixed-goods-notices").get(0), $("#games-search-div").get(0).offsetHeight, 0, $("#fixed-goods-notices").parent().offset().top);
		let s1 = 0,
			s2 = 0;
		//		这里是演示当滚动页面到准备加载其他游戏时展示的动画加载效果
		$(window).scroll(function(e) {
			s2 = window.innerHeight;
			s1 = document.documentElement.scrollTop || document.body.scrollTop;
			if($(window).height() >= ($("html").height() - $("html, body").scrollTop() - 20)) {
				showHideLoading((s2 - 50), true);
				return;
			}
			showHideLoading();
			locationDiv($("#games-bottom-fixed").get(0), window.clientHeight, $("#games-bottom-fixed").height());
			locationDiv($("#fixed-goods-notices").get(0), $("#games-search-div").get(0).offsetHeight, 0, $("#fixed-goods-notices").parent().offset().top);
		}).resize(function() {
			
			locationDiv($("#games-bottom-fixed").get(0), window.clientHeight, $("#games-bottom-fixed").height());
			locationDiv($("#fixed-goods-notices").get(0), $("#games-search-div").get(0).offsetHeight, 0, $("#fixed-goods-notices").parent().offset().top);
		});

		let flag1 = true; //(window.clientHeight - obj.offsetHeight)
		// 这个函数用于让底部固定定位的那个菜单栏的定位top
		function locationDiv(obj, top1, top2 = 0, offsettop = 0) {
			if(obj && document.documentElement.scrollTop >= offsettop - 10) {
				obj.style.position = "fixed";
				obj.style.top = (top1 - top2) + "px";
				return;
			}
			obj.style.position = "";
			obj.style.top = "";
		}
		
		//下面是关于点击设置推荐商品展示区的li元素的排列方向的设置
		$(".column-show-games-goods").click(function() {
			$(".more-games-goods-show").children("li").css({
				"width": ""
			}).children("a").css({
				"display": "",
				"justify-content": "",
				"flex-direction": "",
				"align-items": ""
			}).children("div").css({
				"text-align": ""
			}).end().find(".goods-background-image").css({
				"width": "",
				"height": ""
			});
			jqueryScrollToTopAnimate($(".more-games-goods-show").offset().top);
		});

		$(".row-show-games-goods").click(function() {
			$(".more-games-goods-show").children("li").css({
				"width": "100%"
			}).children("a").css({
				"display": "flex",
				"justify-content": "center",
				"flex-direction": "column",
				"align-items": "center"
			}).children("div").css({
				"text-align": "center"
			}).parents(".more-games-goods-show").find(".goods-background-image").css({
				"width": "100%",
				"height": (($(".goods-background-image").width() * 517) / 1150) + "px"
			});
			// 一点击这个图标就让列表以行的形式展开，每个单独占一行
			jqueryScrollToTopAnimate($(".more-games-goods-show").offset().top);
		});
		objShowOrHide($(".colum-row-show-games-goods"), $("#notices"));
		$(window).resize(function() {
			objShowOrHide($(".colum-row-show-games-goods"), $("#notices"));
		});
		// 使用jQuery中的animate函数进行回到顶部，或者滚动到达某个元素的位置
		function jqueryScrollToTopAnimate(objLen, len = 100) {
			$("body, html").stop(true).animate({
				scrollTop: objLen - len
			}, "slow", "swing");
		}

	});

});